<template>
  <div class="schedule-table-container">
    <table class="schedule-table">
      <thead>
      <tr>
        <th class="time-col">节次</th>
        <th v-for="day in weekDays" :key="day" class="day-col">
          {{ day }}
        </th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(lesson, index) in lessons" :key="index">
        <td class="time-col">{{ '第' + (index + 1) + '节' }}</td>
        <td
            v-for="day in weekDays"
            :key="day"
            class="course-cell"
            @click="handleCourseClick(day, lesson.time)"
        >
          <el-popover
              placement="right"
              trigger="hover"
              width="300"
              v-if="getCourse(day, lesson.time)"
          >
            <template #reference>
              <div
                  class="course-item"
                  :class="{ 'selected-course': isSelectedCourse(day, lesson.time) }"
              >
                <div class="course-name">{{ getCourse(day, lesson.time).name }}</div>
                <div class="course-info">
                  <span class="teacher">{{ getCourse(day, lesson.time).teacher }}</span>
                  <span class="classroom">{{ getCourse(day, lesson.time).classroom }}</span>
                </div>
              </div>
            </template>
            <div class="course-details">
              <h4>{{ getCourse(day, lesson.time).name }}</h4>
              <div class="detail-item">
                <span class="detail-label">课程ID:</span>
                <span>{{ getCourse(day, lesson.time).id }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">课程描述:</span>
                <span>{{ getCourse(day, lesson.time).description }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">课程类别:</span>
                <span>{{ getCourse(day, lesson.time).category }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">授课教师:</span>
                <span>{{ getCourse(day, lesson.time).teacherInfo }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">上课时间:</span>
                <span>{{ day }} 第{{ getLessonIndex(lesson.time) + 1 }}节</span>
              </div>
            </div>
          </el-popover>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  weekDays: {
    type: Array,
    default: () => ['周一', '周二', '周三', '周四', '周五']
  },
  lessons: {
    type: Array,
    default: () => [
      { time: '08:00-08:45' },
      { time: '08:55-09:40' },
      { time: '10:00-10:45' },
      { time: '10:55-11:40' },
      { time: '14:00-14:45' },
      { time: '14:55-15:40' },
      { time: '16:00-16:45' }
    ]
  },
  courses: {
    type: Object,
    default: () => ({})
  },
  selectedCourse: {
    type: Object,
    default: null
  }
});

const emit = defineEmits(['select-course']);

// 获取课程信息
const getCourse = (day, time) => {
  return props.courses[day]?.[time] || null;
};

// 获取节次索引
const getLessonIndex = (time) => {
  return props.lessons.findIndex(lesson => lesson.time === time);
};

// 处理课程点击
const handleCourseClick = (day, time) => {
  const course = getCourse(day, time);
  if (course) {
    emit('select-course', day, time);
  }
};

// 检查是否是当前选中的课程
const isSelectedCourse = (day, time) => {
  return props.selectedCourse &&
      props.selectedCourse.day === day &&
      props.selectedCourse.time === time;
};
</script>

<style scoped>
.schedule-table-container {
  flex: 1;
  overflow: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.schedule-table th,
.schedule-table td {
  border: 1px solid #ebeef5;
  padding: 8px;
  text-align: center;
}

.schedule-table th {
  background-color: #f5f7fa;
  font-weight: bold;
  color: #303133;
  position: sticky;
  top: 0;
  z-index: 1;
}

.time-col {
  width: 100px;
  background-color: #f5f7fa;
  position: sticky;
  left: 0;
  z-index: 1;
}

.day-col {
  min-width: 150px;
}

.course-cell {
  height: 80px;
  vertical-align: top;
  background-color: #fff;
  position: relative;
}

.course-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px;
  background-color: #ecf5ff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.course-item:hover {
  background-color: #d9ecff;
}

.selected-course {
  border: 2px solid #409eff;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}

.course-name {
  font-weight: bold;
  margin-bottom: 5px;
  color: #409eff;
  font-size: 14px;
}

.course-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #606266;
}

.course-details {
  padding: 10px;
}

.course-details h4 {
  margin-top: 0;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.detail-item {
  margin-bottom: 8px;
  display: flex;
}

.detail-label {
  font-weight: bold;
  color: #606266;
  min-width: 80px;
  display: inline-block;
}
</style>
